Less (層疊樣式表)

Less（或寫作LESS）是一種由Alexis Sellier設計的動態層疊樣式表語言，受Sass所影響，同時也影響了Sass的新語法：SCSS。^[2]

Less

設計者	Alexis Sellier
實作者	Alexis Sellier, Dmitry Fadeyev
釋出時間	2009
目前版本	4.2.0（2023年9月7日；穩定版本）[1]
型態系統	動態型別
作業系統	跨平台
特許條款	Apache特許條款 2
副檔名	.less
網站	lesscss.org
啟發語言
CSS, Sass
影響語言
Sass, Less Framework

層疊樣式表

• CSS動畫
• IE盒模型缺陷
• CSS filter
• 無表格網頁設計
• 響應式網頁設計
• 維基教科書

本模板：

• 檢視
• 討論
• 編輯

LESS是開源的，其第一個版本由Ruby寫成，但在後續的版本當中，Ruby逐漸被替換為JavaScript。受益於JavaScript，LESS可以在客戶端上執行（IE6+、Webkit、Firefox），也可以在伺服器端執行（Node.js、Rhino）。^[3]

在語法方面，LESS與CSS較為接近，一個合法的CSS代碼段本身也是一段合法的LESS代碼段。LESS提供變數、巢狀、混合、運算子、函數等一般編程所需的抽象機制。^[3]

變數

LESS支援自訂變數。在LESS中，變數以「@」開頭，賦值時以「:」進行賦值。經過LESS的翻譯，這些變數最終會轉換為符合CSS標準的值。^[3]

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

上面的代碼最終會轉化為下面的代碼：

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

混合

混合允許開發者僅僅通過包含類名將一個類當中的所有屬性全部應用於另一個類，同時也可以像函數一樣提供參數使用。

CSS3並不支援混合，任何重複的代碼必須在每個使用的地方重複編寫，而通過LESS，你可以將代碼進行復用。^[3]

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

上面的代碼將產生下面的代碼：

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

巢狀

CSS支援邏輯上的巢狀，但在代碼本身並不是巢狀的。LESS提供了代碼的巢狀。^[3]

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

將產生：

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

函數與運算子

LESS提供了函數用以支援複雜的屬性間關係，其函數與JavaScript代碼中的函數一一對應，允許JavaScript代碼直接操縱傳達過去的值。同時，LESS內建了基本的運算子，涵蓋了基本加、減、乘、除，能夠對屬性值或顏色進行計算。

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

將產生：

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

相較於Sass

Sass與LESS都屬於CSS的預處理器，都允許通過一定的抽象手段將開發者的意圖轉化為CSS代碼。

LESS受啟發於Sass^[4]，但Sass被設計為簡化、擴充CSS，因此諸如大括號等語法都被移除，但流程控制、繼承等概念被引入其中；相反，LESS被設計為更接近於CSS，其語法與CSS本身非常接近，因此一段合法的CSS代碼也是一段合法的LESS代碼。^[5]不過新版本的Sass同樣將CSS式語法引入了其中，命名為SCSS（Sassy CSS）。^[2]

更多兩者異同可見：https://gist.github.com/674726（英文） （頁面存檔備份，存於互聯網檔案館）

相較於ZUSS

ZUSS受啟發於LESS，但其目的是與Java進行結合，因此混合當中不允許使用JavaScript函數，取而代之的是Java函數。

應用於網站

LESS由於以JavaScript實現，因此既可以在瀏覽器上進行即時翻譯，也可以首先在伺服器上翻譯為CSS之後再傳送給瀏覽器。

參考文獻

1. Release 4.2.0. 2023年9月7日 [2023年9月18日].
2. Sass and Less （頁面存檔備份，存於互聯網檔案館） Sass and Less
3. Official LESS website （頁面存檔備份，存於互聯網檔案館） Official LESS website
4. About LESS （頁面存檔備份，存於互聯網檔案館） About
5. What's Wrong With CSS （頁面存檔備份，存於互聯網檔案館） What's Wrong With CSS

外部連結

• 官方網站
• LESS原始碼（GitHub） （頁面存檔備份，存於互聯網檔案館）